<html>



<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>教师后台-不学也通</title>

  <style>
    .container .kc {

      background-color: #f5f5f5;

    }



    /* .card.col-md-4.ms-3.mt-3:hover{

            background: rgb(241, 240, 240);

        }

        .card.col-md-4.ms-3.mt-3 .mt-1.text-muted:hover,.card.col-md-4.ms-3.mt-3 .card-title:hover{

            color: rgb(97, 172, 172) !important;

        } */

    .link-secondary:hover {

      color: #0d6efd !important;

    }



    .position-relative .position-absolute {

      display: none;

    }



    .card:hover .position-absolute {

      display: block;

    }
  </style>

</head>



<body>

  <!-- container是bootstrap的居中窄的显示方案 -->

  <div class="container bg-body-secondary">



    <div class="position-fixed bottom-0 end-0">

      <div class="form-control rounded-pill text-primary mb-2"><i class="bi bi-volume-up"></i> 更新公告</div>

      <div class="form-control rounded-pill text-primary mb-2"><i class="bi bi-question-circle-fill"></i> 使用帮助

      </div>

      <div class="form-control rounded-pill text-primary mb-2"><i class="bi bi-person"></i> 在线客服</div>

      <div class="form-control rounded-pill text-primary mb-2"><i class="bi bi-arrow-up-circle-fill"></i> 返回顶部

      </div>

    </div>



    <div class="row">



      <div class="col-md-2 leftmenu" id="leftmenu">



      </div>



      <div class="col-md-9 kc ms-3">

        <div class="row mt-3">

          <!-- row似乎不能同时使用flex布局 -->

          <ul class="nav nav-tabs">

            <li class="nav-item">

              <a class="nav-link nav-tab active" aria-current="page" href="#">我教的课程</a>

            </li>

            <li class="nav-item">

              <a class="nav-link nav-tab" href="#">我学的课程</a>

            </li>

            <li class="nav-item">

              <select class="form-select" aria-label="select example">

                <option selected value="-1">请选择学期</option>

                <option value="0">2022-2023第二学期</option>

                <option value="1">2022-2023第一学期</option>

                <option value="2">2021-2022第二学期</option>

                <option value="3">2021-2022第一学期</option>

              </select>

            </li>

            <li class="nav-item ms-5" style="position: relative;">

              <input type="text" class="form-control rounded-pill" placeholder="请输入课程名">

              <i class="bi bi-search" style="position: absolute; right: 1rem; top: 0.7rem;"></i>

            </li>

            <li class="nav-item ms-4">

              <a class="nav-link link-success" href="#"><i class="bi bi-plus-circle-fill"></i>创建文件夹</a>

            </li>

            <li class="nav-item">

              <a class="nav-link link-success" href="./createcourse.html"><i class="bi bi-plus-circle-fill"></i>创建课程</a>

            </li>

          </ul>

        </div>

        <form class="row ms-3" id="from">

          <!-- <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/8e05a66dce05e810845b1973497b14e1.jpg" style="width: 262px;height: 146px;"

                            class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">Web前端你开发基础</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>



                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/create-simple-modal-popup-javascript-css-codexworld-1024x576.png"

                            class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">JavaScript</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-002</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/header-illustration.jpg" class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">CSS</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-003</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/jquer.png" class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">jQuery</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-004</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/R-C (1).png" class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">Bootstrap</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-005</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/R-C (1).png" class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">Bootstrap</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-005</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-Info">移动到</button>

                            <button class="btn btn-Info">退课</button>

                        </div>

                        <img src="../imgs/kc/R-C (1).png" class="card-img-top mt-2" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">Bootstrap</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:mb-005</h6>

                            <h6 class="mt-1 text-muted">教师:不是我</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>22级移动应用开发</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div> -->

        </form>

      </div>

    </div>

  </div>

  <script type="module" src="../js/main.js"></script>

  <script src="../js/jquery.min.js"></script>

  <script src="../js/common.js"></script>

  <script>

    $(document).ready(function () {

      $("#from").serializeArray();

      console.log($("#from"));

      // 当用户点击calss是nav-tab的标签给该标签(添加之前删除所有active类)添加active类

      $(".nav-tab").click(function (e) {

        // 删除nav-tab所有的active类

        $(".nav-tab").removeClass("active");

        // 给电机的标签添加active类

        $(this).addClass("active");

      })

      $.get("https://unicloud.codecore.cn/ms/courseAll?teacher_id=645484f2819ce8deeea2a59b", {}, function (res) {

        // 1. 获取到该班级所有的学生信息 后端返回的是一个数值 res

        for (let i = 0; i < res.data.length; i++) {

          // 3. 循环该数组 将数组中数据拼接大下面字符串对应的位置

          const elem = res.data[i];



          // console.log(elem);

          /**

           * 4.  使用es6 ${}字符串拼接

           *     后端没有传递序号 由前端for循环的i充当

           *     时间需要我们手动转化一下格式

          */

          $("#from").append($(`

                    <div class="card col-md-4 ms-3 mt-3 position-relative" style="width: 18rem;">

                        <div class="position-absolute top-0 end-0" style="right: 0;">

                            <button class="btn btn-info">移动到</button>

                            <button class="btn btn-info shan"data-id="${elem._id}">退课</button>

                        </div>

                        <img src="${elem.course_url}" alt="Web前端">

                        <div class="card-body">

                            <h5 class="card-title">${elem.course_name}</h5>

                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>

                            <h6 class="mt-1 text-muted">课程号:${elem.calss_number}</h6>

                            <h6 class="mt-1 text-muted">教师:${elem.teacher_name}</h6>

                            <h6 class="mt-1 text-muted d-flex justify-content-between">

                                <div>${elem.grade_code}级${elem.course_department}</div>

                                <div>17<i class="bi bi-chevron-right"></i></div>

                            </h6>

                        </div>

                    </div>`))

        }

      })

      $("#from").delegate("button.shan", "click", function () {

        // $(this).data() 获取点击元素上data属性中存放的数据

        let data = $(this).data();// data数据格式是{id:"字符串"} 比较符合后端要求 可以直接传递

        $.post("http://unicloud.codecore.cn/ms/courseRemove", data, function (params) {

          console.log(params);

          if (params.errCode == 0) {

            location.reload();

          } else { alert("删除异常") }

        })

      });

    })

  </script>

</body>



</html>